<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="font-size:large;">
      <el-tab-pane label="图书借阅" name="first">图书借阅</el-tab-pane>
      <el-tab-pane label="借阅管理" name="second">借阅管理</el-tab-pane>
      <el-tab-pane label="违规信息" name="third">违规信息</el-tab-pane>
    </el-tabs>
    <!-- 违规信息 -->
    <div v-if="this.borrow_info">
      <div style="height: 10px;">
      </div>
      <borrowtable :tableData="this.violationData"></borrowtable>
    </div>

    <!-- 借阅管理 -->
    <div v-if="this.tablemanagestate">
      <div style="height: 10px;">
      </div>
      <borrowtable :tableData="this.borrowManageData"></borrowtable>
    </div>

    <!-- 图书借阅 -->
    <borrow v-if="this.borrowmanage" :tableData="this.borrowData"></borrow>
  </div>
</template>

<script>
import borrowtable from "../components/table/borrowerOrdinarytable.vue";
import borrow from "../views/borrow.vue";
import axios from "axios";
export default {
  //tab切换
  name: "borrow_shows",
  components: { borrowtable, borrow },
  methods: {
    handleClick() {
      if (this.activeName == "first") {
        this.borrowmanage = true;
        this.tablemanagestate = false;
        this.borrow_info = false;
      } else if (this.activeName == "second") {
        this.borrowmanage = false;
        this.tablemanagestate = true;
        this.borrow_info = false;
      } else {
        this.borrowmanage = false;
        this.tablemanagestate = false;
        this.borrow_info = true;
      }
    },
  },
  created() {
    axios({
      method: "post",
      url: this.$root.businessServer + "bookInfo/getAllBookInfo",
    })
      .then((response) => {
        this.borrowData = response.data;
      })
      //Promise解决props传值局部刷新的问题，等待消息队列异步执行完成后的数据挂载，局部刷新组件的显示
      .catch((error) => {
        console.log(error);
      });
    axios({
      method: "get",
      url: this.$root.businessServer + "borrowInfo/getAllBorrowInfo",
      params: {
        user_phonenum: this.user_phonenum,
      },
    })
      .then((response) => {
        this.borrowManageData = response.data;
      })
      .catch((error) => {
        console.log(error);
      });

    axios({
      method: "get",
      url: this.$root.businessServer + "violationInfo/getallViolationInfo",
      params: {
        telphonenum: this.user_phonenum,
      },
    })
      .then((response) => {
        axios({
          method: "get",
          url:
            this.$root.businessServer + "violationInfo/updateallViolationInfo",
          params: {
            telphonenum: this.user_phonenum,
          },
        })
          .then((response) => {})
          .catch((error) => {
            console.log(error);
          });
        this.violationData = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },

  data: () => ({
    borrowData: [],
    borrowManageData: [],
    violationData: [],
    activeName: "second",
    user_phonenum: sessionStorage.getItem("phone"),
    borrowmanage: true,
    tablemanagestate: false,
    borrow_info: false,
  }),
};
</script>

<style>
</style>